<template>
    <div id="FaultInfoAna">
        <el-container>
            <el-header>
                <span class="leftText">线路</span>
                <el-cascader
                        :options="trainInfo.lines"
                        v-model="trainInfo.trains"
                        :show-all-levels="false"
                        expandTrigger="hover"
                        @change='selectLine'
                />
                <!-- 评分规则待定 -->
                <span class="rightText" style="font-size: 28px;padding-right: 27px">{{stableScore}}</span>
                <span class="rightText" style="margin: 10px;opacity: 0.6">整体稳定性评分：</span>
            </el-header>

            <el-main>
                <div style="background: #13192C">
                    <myRadar/>
                </div>
                <div style="margin-top: 12px; background: #13192C">
                    <myRadar/>
                </div>
            </el-main>

            <el-footer>
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div class="leftTable"><myCircle/></div>
                        </el-col>
                        <el-col :span="12" >
                            <div class="rightTable"><myCircle/></div>
                        </el-col>
                    </el-row>
                </div>
                <div>
                    <el-row>
                        <el-col :span="12">
                            <div class="leftTable"><myCircle/></div>
                        </el-col>
                        <el-col :span="12">
                            <div class="rightTable"><myCircle/></div>
                        </el-col>
                    </el-row>
                </div>
            </el-footer>
        </el-container>

    </div>
</template>

<script>
    import FaultCircle from "./comp/FaultCircle";
    import FaultRadar from "./comp/FaultRadar";
    import axios from "axios";

    export default {
        name: "FaultInfoAna",
        components: {
            'myRadar': FaultRadar,
            'myCircle': FaultCircle,
        },
        data() {
            return {
                stableScore: '',
                urlBase: process.env.VUE_APP_BASE_URL || "http://119.23.127.239:3333/phm-web-service-gz/",
                trainInfo: {
                    lines: [],
                    trains: [],
                    scores4systems: [],
                },
                radarOption : {
                    legend: {},
                    radar: {
                        name: {
                            textStyle: {
                                color: 'rgba(255,255,255,0.6)', //字体颜色
                                borderRadius: 3, //圆角
                                padding: 0, //padding
                                fontSize: 14
                            }
                        },
                        nameGap: 10,
                        center: ['50%', '50%'],
                        radius: '60%',
                        startAngle: 90,
                        splitNumber: 3,
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.2)'
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(255,255,255,0.4)','rgba(255,255,255,0.3)','rgba(255,255,255,0.2)',],
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(155, 155, 155, 0.4)'
                            }
                        },
                        indicator: [
                            { name: '空气质量', max: 100 },
                            { name: '客室温度', max: 100 },
                            { name: '客室噪音', max: 100 },
                            { name: '拥挤度', max: 100 },
                            { name: '舒适度', max: 100 }
                        ],
                    },
                    series: [{
                        name: '测试数据',
                        type: 'radar',
                        symbol: 'circle', // 拐点为圆形
                        symbolSize: 5,  // 拐点大小
                        itemStyle: {
                            color: '#9FFFD6' // 拐点颜色
                        },
                        lineStyle: {
                            color: 'rgba(27, 185, 52, 1)' // 连线颜色
                        },
                        areaStyle: {
                            color:'rgba(27, 185, 52, 0.6)'
                        },
                        data: [{
                            value: [60,80,55,90,70],
                        }]
                    }]
                },
                colors: {
                    green: {
                        line: 'rgba(27, 185, 52, 1)',
                        area: 'rgba(27, 185, 52, 0.6)',
                        point: '#9FFFD6',
                    },
                    yellow: {
                        line: 'rgba(255, 158, 31, 1)',
                        area: 'rgba(255, 158, 31, 0.6)',
                        point: 'rgba(255, 224, 184, 1)',
                    },
                    red: {
                        line: 'rgba(235, 43, 51, 1)',
                        area: 'rgba(235, 43, 51, 0.6)',
                        point: 'rgba(255, 114, 120, 1)',
                    },
                },
            }
        },
        methods: {
            //获取线路数据
            getLineList() {
                // console.log("1111");
                let url = this.urlBase + 'faultInfo/trainBaseData';
                let that = this;
                axios.get(url).then(function (resp) {
                    that.trainInfo.lines = resp.data.result;
                    that.trainInfo.trains.push(that.trainInfo.lines[0].value);
                    that.trainInfo.trains.push(that.trainInfo.lines[0].children[0].value);
                    that.trainInfo.scores4systems.push(that.trainInfo.lines[0].children[0].scores);
                    that.selectLine(that.trainInfo);
                })
            },
            changeStableScore() {
                this.stableScore = 9+(Math.floor(Math.random()*10)/10);
            },
            changeRadarColor() {

                let currentScore = 60;
                if(currentScore < 60) {
                    this.radarOption.series.data[0].areaStyle.color = this.colors.red.area;
                    this.radarOption.series.lineStyle.color = this.colors.red.line;
                    this.radarOption.series.itemStyle.color = this.colors.red.point;
                } else if (60 <= currentScore && currentScore <= 80) {
                    this.radarOption.series.data[0].areaStyle.color = this.colors.yellow.area;
                    this.radarOption.series.lineStyle.color = this.colors.yellow.line;
                    this.radarOption.series.itemStyle.color = this.colors.yellow.point;
                } else if (80 <= currentScore ) {
                    this.radarOption.series.data[0].areaStyle.color = this.colors.green.area;
                    this.radarOption.series.lineStyle.color = this.colors.green.line;
                    this.radarOption.series.itemStyle.color = this.colors.green.point;
                }
            },
            drawRadarPic() {
                //将this.radarOption的值传给radar组件
                /*console.log('进入函数');
                console.log(this.radarOption);*/
                console.log(this.trainInfo.scores4systems);
                let result1 = document.getElementById('myRadar1');
                let result2 = document.getElementById('myRadar2');
                /*                this.changeRadarColor(result1);
                                this.changeRadarColor(result2);*/

                /*                result1.radarOption.series.data[0].value = this.trainInfo.scores4systems;
                                result2.radarOption.series.data[0].value = this.trainInfo.scores4systems;*/
                //将score4systems的值赋给radarOption中的series
                /*
                                chart1.setOption(result1.option);
                                chart2.setOption(result2.option);*/
            },
            drawPiePic() {

            },
            selectLine() {
                this.changeStableScore();
                //画雷达图
                this.drawRadarPic();
                //画饼状图
                this.drawPiePic();
            },
        },
        mounted() {
            this.getLineList();
        },
    }
</script>

<style scoped>
    .el-header {
        width: 1680px;
        background: #13192C;
        padding: 0;
    }
    .el-main {
        width: 1680px;
        height: 480px;
        margin-top: 12px;
        padding: 0;
    }
    .el-footer {
        width: 1680px;
        background: transparent;
        height: 298px !important;
        margin-top: 8px;
        padding: 0;
    }
    .FaultInfoHeader {
        margin-top: 10px;
    }
    .leftText {
        color: rgba(255,255,255,0.87);
        padding-left: 26px;
        padding-right: 12px;
    }
    .rightText{
        color: rgba(255,255,255,0.87);
        padding-right: 12px;
        float: right;
    }
    .leftTable {
        float: left;
        width: 834px;
        background: #13192C;
        margin-right: 6px;
        margin-bottom: 12px;
    }
    .rightTable {
        float: left;
        width: 834px;
        background: #13192C;
        margin-left: 6px;
        margin-bottom: 12px;
    }
</style>
